<template>
  <div class="stepmodal-page">
      <container-box :metaTitle="routeMeta.title || ''">
        <div slot="container">
          <mds-button type="primary" @click="openModal">分步表单弹窗</mds-button>
          <mds-modal
              :visibility="visibility"
              title="分步表单弹窗"
              @ok="handleOk"
              class="step_modal"
              width="520px"
              @close="handleClose"
              :mask="mask"
              :showClose="true"
          >
              <mds-steps class="steps" :current="1" size="small">
                  <mds-step title="步骤 1"/>
                  <mds-step title="步骤 2"/>
                  <mds-step title="步骤 3"/>
                  <mds-step title="步骤 4"/>
              </mds-steps>
              <dl class="steps-content">
                <dt class="label">
                  <em style="color: #e33; ">*</em>
                  标题文本
                </dt>
                <dd class="steps-content_form">
                  <mds-input
                    placeholder="请输入名称"
                    v-model="inputValue"
                  ></mds-input>
                </dd>
              </dl>
              <dl class="steps-content">
                <dt class="label">
                  下拉已选
                </dt>
                <dd class="steps-content_form">
                  <mds-select
                    style="width: 100%;"
                    defaultValue="选项一"
                    placeholder="请选择"
                    :value="selectValue"
                    @change="handleChange1"
                    size="medium"
                    >
                    <mds-option value="选项一">选项一</mds-option>
                    <mds-option value="选项二">选项二</mds-option>
                    <mds-option value="选项三">选项三</mds-option>
                </mds-select>
                </dd>
              </dl>
              <dl class="steps-content">
                <dt class="label">
                  单项选择
                </dt>
                <dd class="steps-content_form">
                  <mds-radio-group
                      v-model="checkedValue"
                      name="radiogroup">
                      <mds-radio value="a">按城市计划</mds-radio>
                      <mds-radio value="b">按部门计划</mds-radio>
                  </mds-radio-group>
                </dd>
              </dl>
              <dl class="steps-content">
                <dt class="label">
                  下拉多选
                </dt>
                <dd class="steps-content_form">
                  <mds-select
                    style="width: 100%;"
                    :multiple="true"
                    placeholder="请选择"
                    @change="handleChange2"
                    :value="multipleValue"
                    size="medium"
                    >
                    <mds-option value="选项一">选项一</mds-option>
                    <mds-option value="选项二">选项二</mds-option>
                    <mds-option value="选项三">选项三</mds-option>
                  </mds-select>
                </dd>
              </dl>
              <dl class="steps-content">
                <dt class="label">
                  日期选择
                </dt>
                <dd class="steps-content_form">
                  <mds-time-picker
                      style="width: 100%;"
                      v-model="timeValue">
                  </mds-time-picker>
                </dd>
              </dl>
              <div slot="footer" style="text-align: right;">
                  <Mds-button type="primary" @click='handleOk' style="margin-left: 8px;">
                  保存
                  </Mds-button>
                  <Mds-button @click='handleOk' style="margin-left: 8px;">
                  取消
                  </Mds-button>
              </div>
          </mds-modal>
        </div>
    </container-box>
  </div>
</template>
<script>
import ContainerBox from '@/components/ContainerBox'
export default {
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  data() {
    return {
      visibility: false,
      mask: true,
      selectValue: '选项一',
      inputValue: '',
      multipleValue: ['选项一', '选项二'],
      checkedValue: 'a',
      timeValue: null
    }
  },
  methods: {
    handleChange1(val) {
      this.selectValue = val
    },
    handleChange2(val) {
      this.multipleValue = val
    },
    openModal() {
      this.visibility = true
    },
    handleOk() {
      this.visibility = false
    },
    handleClose() {
      this.visibility = false
    }
  }
}
</script>
<style>
    .step_modal .steps{
        margin-bottom: 38px;
    }
    .step_modal .steps-content{
      position: relative;
      margin-bottom: 26px;
      padding-left: 90px;
      padding-right: 31px;
    }
    .step_modal .steps-content dt, .step_modal .steps-content dd {
      display: inline-block;
    }
    .step_modal .steps-content dd{
      width: 100%;
    }
    .step_modal .steps-content .label {
        position: absolute;
        color: #7F8FA4;
        text-align: center;
        left: 0px;
        padding-left: 10px;
    }
    .step_modal .steps-content .label em{
      position: absolute;
      left: 0px;
    }
</style>
